<script setup>
import { ref } from 'vue';
import ConverterCard from '../components/ConverterCard.vue';
import { unitCategories } from '../utils/units';

// 获取所有分类
const categories = ref(unitCategories);
</script>

<template>
  <div class="unit-converter">
    <h1>单位换算器</h1>
    <div class="converter-grid">
      <ConverterCard
        v-for="category in categories"
        :key="category.name"
        :category="category"
        class="converter-item"
      />
    </div>
  </div>
</template>

<style scoped>
.unit-converter {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  margin-top: 0;
  text-align: center;
  margin-bottom: 2rem;
  color: #ffbece;
}

/* 网格容器 */
.converter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 强制2列 */
  grid-template-rows: repeat(2, 1fr);    /* 强制2行 */

  height: 30rem;

  /* 间距 */
  row-gap: 5rem;   /* 行间距 */
  column-gap: 3rem; /* 列间距 */
}

/* 单个方块 */
.converter-item {
  background: #ffbece;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  min-height: 0; /* 允许内容压缩 */
  max-height: 90%;
  transition: all 0.2s ease;
}

.converter-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .converter-grid {
    grid-template-columns: 1fr; /* 小屏幕下改为1列 */
    grid-template-rows: repeat(4, 1fr); /* 改为4行 */
    aspect-ratio: auto;
  }
}
</style>